/*
 * @Author: 鏉滀簩搴� 3224811364@qq.com
 * @Date: 2024-06-25 17:24:33
 * @LastEditors: 鏉滀簩搴� 3224811364@qq.com
 * @LastEditTime: 2024-07-16 16:11:28
 * @FilePath: src/pages/Login.tsx
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 */
import React, {useEffect} from 'react';
import style from './Login.module.scss'
import {Button, Checkbox, Form, Input, message, Space, Typography} from "antd";
import {UserAddOutlined} from "@ant-design/icons";
import {Link, useNavigate} from "react-router-dom";
import {getUserInfoFormStorage, removeUserInfoFormStorage, setUserInfoFormStorage} from "../utils/localSave";
import {useRequest} from "ahooks";
import {loginService} from "../service/user";
import {MANAGE_INDEX_PATHNAME} from "../constants";
import {setToken} from "../utils/user-token";

const {Title} = Typography;

const Login: React.FC = () => {
  const [form] = Form.useForm()
  const nav = useNavigate()
  // 登录函数
  const {run: Login} = useRequest(async (username: string, password: string) => {
    const data = await loginService(username, password)
    return data
  }, {
    manual: true,
    onSuccess(result: any) {
      const {token = ''} = result
      console.log(result, 'result')
      message.success("登录成功")
      setToken(token)
      nav(MANAGE_INDEX_PATHNAME)
    }
  })

  // 提交时的操作
  function onFinish(values: any) {
    console.log('values', values)
    if (values.remember) {
      setUserInfoFormStorage(values.username, values.password)
    } else {
      removeUserInfoFormStorage()
    }
    const {username, password} = values
    Login(username, password)
  }

  // 首次登录 赋值给input
  useEffect(() => {
    const {username, password} = getUserInfoFormStorage()
    form.setFieldValue('username', username)
    form.setFieldValue('password', password)
  }, []);

  return (
    <div className={style.container}>
      <div>
        <Space>
          <Title level={2}>
            <UserAddOutlined/>
          </Title>
          <Title level={2}>登录</Title>
        </Space>
      </div>
      <div>
        <Form
          name="basic"
          labelCol={{span: 8}}
          wrapperCol={{span: 16}}
          initialValues={{remember: true}}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          <Form.Item label="用户名" name="username"
                     rules={[{required: true, message: '请输入用户名'}, {
                       type: "string",
                       min: 5,
                       max: 20,
                       message: '用户名长度在5-20'
                     }]}>
            <Input/>
          </Form.Item>

          <Form.Item
            rules={[{required: true, message: '请输入密码'}]}
            label="密码" name="password">
            <Input.Password/>
          </Form.Item>
          <Form.Item name="remember"
                     valuePropName={'checked'} wrapperCol={{offset: 8, span: 16}}>
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{offset: 8, span: 16}}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Link to={"/register"}>注册新账户</Link>
          </Form.Item>
        </Form>
      </div>

    </div>
  );
};

export default Login;
